<template xmlns="http://www.w3.org/1999/html">
  <!-- 所有赞助人列表 -->
  <div class="article-container">
    <!-- 顶部清除浮动线 -->
    <div class="line-top"></div>
    <!-- 中间整个容器 -->
    <div class="container-in">
      <!-- 左边大容器 -->
      <div class="main">
        <!-- 文章详情 -->
        <div class="article-box">
          <div>
            <h2>{{ article.title }}</h2>
          </div>
          <div>
            <el-tag effect="dark" type="danger" v-if="article.original==='0'"> 原创</el-tag>
            <el-tag effect="dark" type="danger" v-if="article.original==='1'"> 转载</el-tag>
            <el-tag effect="dark" type="danger" v-if="article.original==='2'"> 翻译</el-tag>
            <!-- 跳转到一级分类 -->
            <a :href="'/?current=1&size=10&createTime=1&categoryPid=' + article.categoryPid"
               :title="'一级分类'+ article.categoryParentName">
              <el-tag effect="dark">{{ article.categoryParentName }}</el-tag>
            </a>
            <!-- 跳转到二级分类 -->
            <a :href="'/?current=1&size=10&createTime=1&categoryPid=' + article.categoryPid
                             + '&categoryId=' + article.categoryId" :title="'二级分类'+ article.categoryName">
              <el-tag effect="dark">{{ article.categoryName }}</el-tag>
            </a>
            <!-- 跳转到用户个人主页 -->
            <nuxt-link :to="'/user/'+article.userId">
              <span><i class="el-icon-user-solid"/> {{ article.username }}</span>
            </nuxt-link>
            <el-divider direction="vertical"/>
            <span><i class="el-icon-view"/> {{ article.viewCount }}</span>
            <el-divider direction="vertical"/>
            <span><i class="el-icon-chat-dot-round"/> {{ article.commentCount }}</span>
            <el-divider direction="vertical"/>
            <span class="iconfont icon-zan1"> {{ article.thumbCount }}</span>
            <el-divider direction="vertical"/>
            <span><i class="el-icon-star-off fs16"/> {{ article.collectionCount }}</span>
            <el-divider direction="vertical"/>
            <span><i class="el-icon-coin"/> {{ article.awardCount }}</span>
            <el-divider direction="vertical"/>
            <span><i class="el-icon-time"/> {{ getDateFormat(article.createTime) }}</span>
          </div>
          <div class="article-refuse">
            <span v-if="article.refuse==1">⛔ 转载请注明出处</span>
            <span v-if="article.refuse==2">⛔ 未经作者授权，禁止转载</span>
          </div>
          <div class="article-content">
            <!-- 文章内容 -->
            <div class="content" v-html="article.content"></div>
            <!-- 修改时间 -->
            <div class="update-time">
              <span v-if="article.createTime !== article.updateTime">修改于 {{ getDateFormat(article.updateTime) }}</span>
            </div>
            <hr>
            <div class="do-article">
              <div class="flex">
                <!-- 子组件 举报 -->
                <el-tooltip content="举报" placement="top">
                    <span>
                      <Report @openOrCloseReport="openOrCloseReport"
                              :dialogVisible="dialogVisible"
                              :title="article.title" :author="article.username"
                              :reportData="reportData"
                              @addReport="addReport"/>
                    </span>
                </el-tooltip>
                <el-divider direction="vertical"/>
                <!-- 取消收藏 -->
                <el-tooltip content="取消收藏" placement="top" v-if="isCollect">
                  <a href="javascript:void(0);" class="iconfont icon-shoucang-shoucang big-icon"
                     @click="removeCollect()"><span> {{ article.collectionCount }}</span></a>
                </el-tooltip>
                <!-- 收藏 -->
                <el-tooltip content="收藏" placement="top" v-else>
                  <a href="javascript:void(0);" class="el-icon-star-off big-star" @click="addCollect()">
                    <span> {{ article.collectionCount }}</span></a>
                </el-tooltip>
                <el-divider direction="vertical"/>
                <!-- 子组件 - 奖励 -->
                <Award :title="article.title" :author="article.username" :awardCount="article.awardCount"
                       :isAward="isAward"
                       :rewardUrl="article.rewardUrl" :awardDialogVisible="awardDialogVisible"
                       @openOrCloseAward="openOrCloseAward"
                       :awardData="awardData" @addAward="addAward"/>
                <el-divider direction="vertical"/>
                <!-- 取消点赞 -->
                <el-tooltip content="取消点赞" placement="top" v-if="isThumb">
                  <a href="javascript:void(0);" class="iconfont icon-icon_dianzan-mian big-icon"
                     @click="removeThumb"><span> {{ article.thumbCount }}</span></a>
                </el-tooltip>
                <!-- 点赞 -->
                <el-tooltip content="点赞" placement="top" v-else>
                  <a href="javascript:void(0);" class="iconfont icon-zan1 big-icon" @click="addThumb">
                    <span> {{ article.thumbCount }}</span>
                  </a>
                </el-tooltip>
              </div>
              <div v-if="userId == article.userId">
                <el-tooltip placement="top">
                  <div slot="content">
                    <!-- 删除文章（目前查看文章详情是在新窗口打开，为了避免在新窗口删除文章后，从旧窗口点进报错，这里不提供删除文章的接口 -->
                    <!-- <br>-->
                    <!-- <p class="ico-btn" @click="removeArticleById"><i class="el-icon-delete"/></p>-->
                    <br>
                    <!-- 编辑文章 -->
                    <p><a class="el-icon-edit-outline ico-btn" :href="'/article/edit/?id='+ article.id"/></p>
                    <br>
                  </div>
                  <!-- 。。。 -->
                  <i class="el-icon-more-outline"/>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <!-- /文章详情 -->
        <!-- 子组件-留言区-->
        <div v-if="article.commentClose == 0">
          <Comment :userId="userId" :authorId="authorId" :avatar="avatar" :commentList="commentList"
                   :searchObj="searchObj"
                   :current="current" :size="size" :total="total"
                   @searchCreateTime="searchCreateTime"
                   @searchThumbCount="searchThumbCount"
                   @handleCurrentChange="handleCurrentChange"
                   :commentData="commentData" @addComment="addComment"
                   :replyData="replyData" @addReply="addReply"
                   :replyCurrent="replyCurrent" :replySize="replySize"
                   :replyList="replyList"
                   @handleReplyTopTen="handleReplyTopTen"
                   @handleReplyCurrentChange="handleReplyCurrentChange"
                   :targetData="targetData"
                   @removeCommentById="removeCommentById"
                   @removeReplyById="removeReplyById"
                   @addCommentThumb="addCommentThumb"
                   @addReplyThumb="addReplyThumb"
                   :reportCommentData="reportCommentData"
                   @addReportComment="addReportComment"/>
        </div>
      </div>
      <!-- 右则边栏 -->
      <template>
        <!-- 子组件-发布新贴入口 -->
        <Add/>
        <!-- 经历主人头像 -->
        <div class="aside" v-if="article.masterUrl">
          <!-- 经历主人头像 -->
          <el-card>
            <img class="sidle-avatar" :src="article.masterUrl" alt="" height="300px;">
            <div class="master-name">
              <b>{{ article.masterName }}</b>
            </div>
          </el-card>
        </div>
        <!-- 作者头像 -->
        <div class="aside" v-if="!article.masterUrl">
          <el-card class="box-card">
            <a :href="'/user/'+article.userId">
              <img class="sidle-avatar" :src="article.avatar" alt="">
            </a>
            <el-divider content-position="center">作者</el-divider>
            <div>
              <a :href="'/user/'+article.userId">
                <div class="username">
                  <b>{{ article.username }}</b>
                </div>
              </a>
              <div v-if="userId !== article.userId">
                <br>
                <!-- 关注 -->
                <el-button v-if="!isFollow" icon="el-icon-plus" @click="follow">关注</el-button>
                <!-- 已关注 -->
                <el-button v-else @click="unFollow">已关注</el-button>
                <br>
                <el-button icon="el-icon-message" @click="openMessageBox"> 私信</el-button>
                <br>
              </div>
            </div>
          </el-card>
        </div>
        <!-- 子组件 - 发送私信 -->
        <Message :messageData="messageData" :author="article.username" :messageBox="messageBox"
                 @openMessageBox="openMessageBox" @sendMessage="sendMessage"/>
        <!-- 右则边栏 随机诗语 -->
        <Aphorism :content="randomTip.content" :author="randomTip.author"/>
        <!-- 右则边栏 文章推荐 -->
        <div v-if="recommendArticleList">
          <Recommend v-bind:recommendArticleList="recommendArticleList"/>
        </div>
        <div class="md-hidden line-1"></div>
        <!-- 右则边栏 轮播图 -->
        <div class="aside">
          <el-carousel style="background-color: #FFFFFF;border-radius: 4px;">
            <el-carousel-item v-for="item in looperList" :key="item.id">
              <el-divider content-position="center">{{ item.title }}</el-divider>
              <div>
                <a :href="item.looperLink" v-if="item.looperLink">
                  <img class="carousel-img" :src="item.looperUrl" alt="">
                </a>
                <a :href="'/user/'+item.userId" v-else>
                  <img class="carousel-img" :src="item.looperUrl" alt="">
                </a>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 子组件-VIP赞助人 -->
        <Sponsor v-bind:sponsors="sponsors" :isOpenSponsor="isOpenSponsor"/>
        <div class="md-hidden line-2"></div>
        <!-- 子组件 - 赞助1元/成为VIP赞助人-->
        <Patron v-bind:patronTop36="patronTop36" :isOpenPatron="isOpenPatron"
                :addPatronData="addPatronData" @addPatron="addPatron"
                @openPatron="openPatron" @handleClosePatron="handleClosePatron"
                :addSponsorData="addSponsorData" @addSponsor="addSponsor" :isOpenSponsor="isOpenSponsor"
                @openSponsor="openSponsor" @handleCloseSponsor="handleCloseSponsor"/>
      </template>
      <!-- /右则边栏 结束 -->
    </div>
    <!-- 底部清除浮动线 -->
    <div class="line-bottom"></div>
  </div>
</template>
<script>
import {dateFormat} from '@/utils/date' // 日期格式化
import Add from '@/components/article/add'  // 子组件-发布新贴入口
import Report from "@/components/article/report"; // 新增举报子组件
import Award from "@/components/article/award"; // 新增奖励子组件
import Comment from "@/components/article/comment" // 留言子组件
import Aphorism from '@/components/aside/aphorism'  // 子组件-随机诗语
import Recommend from '@/components/aside/recommend'  // 子组件-文章推荐
import Sponsor from '@/components/aside/sponsor'  // 子组件-右则VIP赞助人
import Patron from '@/components/aside/patron' // 子组件-赞助1元-成为VIP赞助人
import Message from '@/components/aside/message' // 子组件-发送私信

export default {
  name: 'article-detail',
  components: {
    Report,
    Award,
    Comment,
    Add,
    Aphorism,
    Recommend,
    Sponsor,
    Patron,
    Message
  },
  // 校验id为数值才可访问此组件
  validate({params}) {
    return /^\d+$/.test(params.id)
  },
  // 动态标题
  head() {
    return {
      title: this.article.title + ' - 经历网'
    }
  },
  // 服务端获取数据
  async asyncData({params, app, store}) {
    // 获取路由ID
    const routeId = params.id
    // 获取当前登录用户ID和头像 ( 方法参数上传入 store 才能获取 )
    const userId = store.state.userInfo && store.state.userInfo.id || 0
    const avatar = store.state.userInfo && store.state.userInfo.avatar || ''
    // 根据路由上的文章ID获取文章详情
    const {data: articleInfo} = await app.$getArticleById(routeId)
    const article = articleInfo.articleInfo
    // 文章作者ID，传给评论子组件，判断是否作者
    const authorId = article.userId

    // 是否已收藏 isCollect
    const {data: collect} = await app.$isCollect(article.id, userId)
    const isCollect = collect.isCollect
    // 是否已点赞文章（userId, entityId,entityType,entityUserId）
    const {data: thumb} = await app.$isThumb(userId, article.id, 0, article.userId)
    const isThumb = thumb.isThumb
    // 是否已奖励
    const {data: award} = await app.$isAward(userId, article.id)
    const isAward = award.isAward

    // 随机诗语
    const {data: aphorism} = await app.$getRandomTip()
    const randomTip = aphorism.randomTip
    // 文章推荐列表
    const {data: recommend} = await app.$getArticleRecommendList()
    const recommendArticleList = recommend.recommendList
    // 轮播图 - 右边栏
    const {data: looper} = await app.$getArticleLooperList()
    const looperList = looper.looperListArticle
    // VIP赞助人
    const {data: sponsor} = await app.$getSponsorList()
    const sponsors = sponsor.sponsors
    // 赞助人
    const {data: patron} = await app.$getPatronTop36()
    const patronTop36 = patron.patronList
    // 是否已关注
    const {data: follow} = await app.$isFollow(userId, article.userId)
    const isFollow = follow.isFollow

    // 获取留言列表数据
    const current = 1     // 留言当前页码
    const size = 10        // 留言每页显示记录数
    const showTop = 1     // 是否查询留言列表前三条最热回复，默认为查询
    // 留言列表条件搜索对象
    const searchObj = {
      thumbCount: null,
      createTime: '',
    }
    const {data: comment} = await app.$getCommentList(userId, article.id, current, size, showTop, searchObj)
    const commentList = comment.records
    const total = comment.total

    return {
      routeId,
      userId,
      avatar,
      article,
      authorId,
      randomTip,
      recommendArticleList,
      looperList,
      sponsors,
      patronTop36,
      isCollect,
      isFollow,
      isThumb,
      isAward,
      current,
      size,
      showTop,
      total,
      searchObj,
      commentList
    }
  },
  data() {
    return {
      // 回复
      replyCurrent: 1,  // 回复当前页码
      replySize: 5,     // 回复每页显示记录数
      replyList: [],
      repTotal: 0,
      commentId: 0,
      // 举报-举报文章对话框，默认隐藏，传给子组件
      dialogVisible: false,
      // 举报-新增举报文章数据对象
      reportData: {
        title: '', // 当前文章标题
        entityType: '0', // 举报的实体：(0 文章；1 留言；2 回复；3 私信 )
        entityId: '',  // 当前文章id
        entityUserId: '', // 举报目标用户ID
        reportType: '', // 举报原因：(0 作品侵权；1 涉嫌违法；2 色情低俗；3 骚扰谩骂；4 虚假宣传；5 低质灌水；6 其它 )"
        description: '', // 补充说明（子组件传过来）
        content: '' // 举报文章，为空
      },
      // 奖励-新增奖励对话框
      awardDialogVisible: false,
      // 奖励-新增奖励作者
      awardData: {
        amount: '',
        articleId: 0,
        entityType: "0",
        entityUserId: 0,
        payNumber: "",
        title: ""
      },
      // 留言-新增
      commentData: {
        articleId: 0,
        content: ""
      },
      // 回复-新增
      replyData: {
        commentId: 0,
        content: "",
        rootId: 0,
        toUserId: 0
      },
      // 回复-新增回复返回总回复数
      replyCount: 0,
      // 新增@某人回复
      targetData: {
        commentId: 0,
        content: "",
        rootId: 0,
        toUserId: 0
      },
      // 留言搜索条件
      searchObj: {
        createTime: '',
        thumbCount: null
      },
      // 举报留言
      reportCommentData: {
        title: '', // 当前文章标题
        entityType: '', // 举报的实体：(0 文章；1 留言；2 回复；3 私信 )
        entityId: '',  // 当前留言id
        entityUserId: '', // 举报目标用户ID
        reportType: '', // 举报原因：(0 作品侵权；1 涉嫌违法；2 色情低俗；3 骚扰谩骂；4 虚假宣传；5 低质灌水；6 其它 )"
        description: '', // 补充说明（子组件传过来）
        content: '' // 举报的留言内容
      },
      // 新增赞助人-窗口
      dialogWidth: false,
      isOpenPatron: false,
      addPatronData: {
        amount: 0,
        message: "",
        payNumber: ""
      },
      // VIP赞助人-窗口
      isOpenSponsor: false,
      addSponsorData: {
        amount: 0,
        message: "",
        payNumber: ""
      },
      // 私信内容
      messageBox: false,
      messageData: {
        content: "",
        fromId: 0,
        toId: 0
      }
    }
  },
  methods: {
    async fetchCommentData() {
      const {data} = await this.$getCommentList(this.userId, this.article.id, this.current, this.size, this.showTop, this.searchObj)
      this.commentList = data.records
      this.total = data.total
    },
    // 回复-查询前10条记录
    async handleReplyTopTen(commentId) {
      this.replyCurrent = 1
      this.replySize = 10
      const {data} = await this.$getReplyListByCommentId(this.userId, commentId, this.replyCurrent, this.replySize)
      this.replyList = data
    },
    // 回复-获取分页回复列表数据
    async fetchReplyData() {
      const {data} = await this.$getReplyListByCommentId(this.userId, this.commentId, this.replyCurrent, this.replySize)
      this.replyList = data
    },
    // 回复-切换分页
    async handleReplyCurrentChange(replyCurrent, commentId) {
      this.replyCurrent = replyCurrent
      this.commentId = commentId
      await this.fetchReplyData()
    },
    // 回复-新增回复、新增@某人回复（ 评论的replyCount 用于控制调用那个接口）
    async addReply(commentId, content, rootId, toUserId, replyCount) {
      // 提交数据给后台
      if (content === '') {
        this.$message.error('回复内容不能为空');
        return;
      }
      if (content.length < 1 || content.length > 1000) {
        this.$message.error('回复内容的长度为 1 至 1000 个字符')
        return
      }
      this.replyData.commentId = commentId
      this.replyData.content = content
      this.replyData.rootId = rootId
      this.replyData.toUserId = toUserId
      this.$addReply(this.replyData).then(response => {
        if (response.code === 200) {
          this.replyData.content = ''
          this.commentId = commentId
          if (replyCount <= 3) {
            // 刷新评论列表
            this.fetchCommentData();
          }
          // 刷新前10条回复列表数据
          if (replyCount > 3 && replyCount <= 10) {
            // 不查询留言下的前三条回复（只要不是数字 1 ）
            this.showTop = 2
            // 刷新评论列表
            this.handleReplyTopTen(this.commentId);
            this.fetchCommentData();
          }
          // 刷新回复列表
          if (replyCount >= 10) {
            // 不查询留言下的前三条回复（只要不是数字 1 ）
            this.showTop = 2
            // 刷新评论列表
            this.fetchReplyData()
            this.fetchCommentData();
          }
          this.$message.success("发表回复成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 留言-条件查询留言列表-时间倒序
    searchCreateTime() {
      this.searchObj.createTime = '1'
      this.searchObj.thumbCount = null
      this.fetchCommentData()
    },
    // 留言-条件查询留言列表-点赞数倒序
    searchThumbCount() {
      this.searchObj.thumbCount = 1
      this.searchObj.createTime = ''
      this.fetchCommentData()
    },
    // 留言-切换分页
    handleCurrentChange(current) {
      this.current = current
      this.fetchCommentData()
    },
    // 留言-新增
    addComment(content) {
      // 提交数据给后台
      if (content === '') {
        this.$message.error('留言内容不能为空')
        return
      }
      if (content.length < 1 || content.length > 1000) {
        this.$message.error('留言内容的长度为 1 至 1000 个字符')
        return
      }
      this.commentData.articleId = this.article.id
      this.commentData.content = content
      this.$addComment(this.commentData).then(response => {
        if (response.code === 200) {
          this.commentData.content = ""
          // 刷新留言列表(因为默认不是按时间倒序，为了新增后能第一时间看到留言，这里必须设置当前页为第1页）
          this.current = 1
          this.fetchCommentData()
          // 刷新文章列表（留言数量）
          this.fetchData()
          this.$message.success("发表留言成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 点赞-留言
    addCommentThumb(entityId, entityUserId) {
      // 参数：文章ID、留言ID、entityType 点赞的实体类型 1 为留言、留言者ID
      this.$addCommentThumb(this.article.id, entityId, 1, entityUserId).then(response => {
        if (response.code === 200) {
          this.fetchCommentData()
          this.$message.success(response.message);
        } else {
          this.$message.info(response.message)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 点赞-回复（ commentId, replyCount 用于条件判断刷新那个接口 ）
    addReplyThumb(entityId, entityUserId, commentId, replyCount) {
      // 参数：文章ID、回复ID、entityType 点赞的实体类型 2 为回复、回复者ID
      this.$addReplyThumb(this.article.id, entityId, 2, entityUserId).then(response => {
        if (response.code === 200) {
          this.commentId = commentId
          if (replyCount <= 3) {
            // 刷新评论列表
            this.fetchCommentData();
          }
          // 刷新前10条回复列表数据
          if (replyCount > 3 && replyCount <= 10) {
            // 不查询留言下的前三条回复（只要不是数字 1 ）
            this.showTop = 2
            // 刷新评论列表
            this.handleReplyTopTen(this.commentId);
            this.fetchCommentData();
          }
          // 刷新回复列表
          if (replyCount >= 10) {
            // 不查询留言下的前三条回复（只要不是数字 1 ）
            this.showTop = 2
            // 刷新评论列表
            this.fetchReplyData()
            this.fetchCommentData();
          }
          this.$message.success(response.message);
        } else {
          this.$message.info(response.message)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 留言-根据留言ID删除留言-批量删除对应的回复-文章留言数 - 1
    removeCommentById(id) {
      this.$confirm('您确定要删除这条留言吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        this.$removeCommentById(id).then(response => {
          if (response.code === 200) {
            // 刷新文章，和留言列表
            this.fetchData()
            this.fetchCommentData()
            this.$message.success("删除留言成功")
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
        // 取消删除，什么也不做
      })
    },
    // 回复-根据回复ID删除回复-对应留言回复数 - 1
    removeReplyById(commentId, replyId, replyCount) {
      this.$confirm('您确定要删除这条回复吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        this.$removeReplyById(replyId).then(response => {
          if (response.code === 200) {
            // 刷新留言列表
            this.commentId = commentId
            if (replyCount <= 3) {
              // 刷新评论列表
              this.fetchCommentData();
            }
            // 刷新前10条回复列表数据
            if (replyCount > 3 && replyCount <= 10) {
              // 不查询留言下的前三条回复（只要不是数字 1 ）
              this.showTop = 2
              // 刷新评论列表
              this.handleReplyTopTen(this.commentId);
              this.fetchCommentData();
            }
            // 刷新回复列表
            if (replyCount >= 10) {
              // 不查询留言下的前三条回复（只要不是数字 1 ）
              this.showTop = 2
              // 刷新评论列表
              this.fetchReplyData()
              this.fetchCommentData();
            }
            this.$message.success("删除回复成功")
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
        // 取消删除，什么也不做
      })
    },
    // 刷新文章详情
    async fetchData() {
      const {data} = await this.$getArticleById(this.article.id)
      this.article = data.articleInfo
    },
    // 根据文章ID删除文章
    // removeArticleById() {
    //   this.$confirm('您确定要删除这篇文章吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     // 发送删除请求
    //     this.$removeArticleById(this.article.id).then(response => {
    //       if (response.code === 200) {
    //         this.$message.success("删除文章成功")
    //         window.location = '/';
    //       } else {
    //         this.$message.error(response.message)
    //       }
    //     })
    //   }).catch(() => {
    //     // 取消删除，什么也不做
    //   })
    // },
    // 私信-打开或关闭私信输入框
    openMessageBox() {
      this.messageData.content = ''
      this.messageBox = !this.messageBox;
    },
    // 私信-发送私信
    async sendMessage(messageData) {
      if (this.userId === 0) {
        window.location.href = (`/auth/login?redirectURL=` + window.location.href)  // 重定向回来
      }
      this.messageData.content = messageData.content
      this.messageData.toId = this.article.userId
      await this.$sendMessage(this.messageData).then(response => {
        if (response.code === 200) {
          this.messageData.content = ''
          this.messageBox = !this.messageBox
          this.$message.success(response.message)
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 关注-新增关注文章作者
    follow() {
      this.$follow(this.article.userId).then(response => {
        if (response.code === 200) {
          this.$message.success('关注成功')
          this.isFollow = true // 修改关注状态，为已关注
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 关注-取消关注文章作者
    unFollow() {
      this.$confirm('确定要取消关注吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$unFollow(this.article.userId).then(response => {
          if (response.code === 200) {
            this.isFollow = false // 修改关注状态，未已关注
          }
        })
        this.$message('已取消关注')
      }).catch(() => {
      })
    },
    // 奖励-打开奖励窗口
    openOrCloseAward() {
      this.awardData.amount = ''
      this.awardData.payNumber = ''
      this.awardDialogVisible = !this.awardDialogVisible
    },
    // 奖励-作者
    addAward() {
      this.awardData.articleId = this.article.id
      this.awardData.entityUserId = this.article.userId
      this.awardData.title = this.article.title
      this.$addAward(this.awardData).then(response => {
        if (response.code === 200) {
          this.isAward = true
          this.fetchData()
          this.awardDialogVisible = !this.awardDialogVisible
          this.$message.success("奖励作者成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 点赞-文章
    addThumb() {
      // 参数：文章ID、点赞类型 0文章、作者ID / entityId,entityType,entityUserId
      this.$addThumb(this.article.id, 0, this.article.userId).then(response => {
        if (response.code === 200) {
          this.isThumb = true
          this.fetchData()
          this.$message.success("点赞文章成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 点赞-取消点赞文章
    removeThumb() {
      this.$confirm('您确定要取消点赞吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 参数：文章ID、点赞类型 0文章、作者ID / entityId,entityType,entityUserId
        this.$removeThumb(this.article.id, 0, this.article.userId).then(response => {
          if (response.code === 200) {
            this.isThumb = false
            this.fetchData()
            this.$message('已取消点赞')
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    // 收藏-文章
    addCollect() {
      this.$addCollect(this.article.id, this.article.userId).then(response => {
        if (response.code === 200) {
          // 刷新文章详情，展示最新收藏总数
          this.isCollect = true
          this.fetchData()
          this.$message.success("收藏文章成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 收藏-取消收藏文章
    removeCollect() {
      this.$confirm('您确定要取消收藏该文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$removeCollect(this.article.id).then(response => {
          if (response.code === 200) {
            this.isCollect = false
            this.fetchData()
            this.$message.info('已取消收藏')
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    // 格式化日期时间
    getDateFormat(date) {
      return dateFormat(date)
    },
    // 举报-打开举报文章窗口
    openOrCloseReport() {
      if (this.userId === 0) {
        this.$message.error("请登录后再操作")
        this.$router.push('/auth/login');
        return
      }
      this.reportData.reportType = '';
      this.reportData.description = ''
      this.dialogVisible = !this.dialogVisible
    },
    // 举报-新增举报文章
    async addReport() {
      this.reportData.entityUserId = this.article.userId
      this.reportData.title = this.article.title
      this.reportData.entityId = this.article.id
      this.reportData.title = this.article.title
      await this.$addReport(this.reportData).then(response => {
        if (response.code === 200) {
          this.dialogVisible = !this.dialogVisible
          this.$message.success("举报文章成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 举报-留言、回复
    async addReportComment(reportCommentData, entityType, entityId, content, entityUserId) {
      if (this.userId === 0) {
        this.$message.error("请登录后再操作")
        window.location.href = (`/auth/login?redirectURL=` + window.location.href)  // 重定向回来
      }
      if (this.reportCommentData.reportType === '') {
        this.$message.error('请选择举报类型')
        return
      }
      if (!!this.reportCommentData.description) {
        if (this.reportCommentData.description.length < 10 || this.reportCommentData.description.length > 500) {
          this.$message.error("补充说明内容长度为 10 至 500 个字符")
          return
        }
      }
      this.reportCommentData.entityUserId = entityUserId
      this.reportCommentData.title = this.article.title;
      this.reportCommentData.entityId = entityId
      this.reportCommentData.entityType = entityType
      this.reportCommentData.description = reportCommentData.description
      this.reportCommentData.reportType = reportCommentData.reportType
      this.reportCommentData.content = content
      await this.$addReport(this.reportCommentData).then(response => {
        if (response.code === 200) {
          this.$message.success("举报成功")
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 打开-赞助1元-窗口
    openPatron() {
      this.addPatronData.message = ''
      this.addPatronData.payNumber = ''
      this.isOpenPatron = !this.isOpenPatron
    },
    // 关闭-赞助1元-窗口
    handleClosePatron() {
      this.addPatronData.message = ''
      this.addPatronData.payNumber = ''
      this.isOpenPatron = !this.isOpenPatron
    },
    // 刷新-赞助1元-数据列表
    async getPatron() {
      const {data} = await this.$getPatronTop36()
      this.patronTop36 = data.patronList
    },
    // 新增-赞助1元
    async addPatron() {
      await this.$addPatron(this.addPatronData).then(response => {
        if (response.code === 200) {
          // 后端接口会删除缓存
          this.getPatron()
          this.isOpenPatron = !this.isOpenPatron
          this.$message.success('赞助成功')
        } else {
          this.$message.error(response.message)
        }
      })
    },
    // 获取所有VIP赞助人
    async getSponsor() {
      const {data} = await this.$getSponsorList()
      this.sponsors = data.sponsors
    },
    // 成为VIP赞助人-新增
    async addSponsor() {
      await this.$addSponsor(this.addSponsorData).then(response => {
        if (response.code === 200) {
          // 刷新VIP赞助人列表，后端接口会删除缓存
          this.getSponsor()
          this.isOpenSponsor = !this.isOpenSponsor
          this.$message.success('赞助成功')
        } else {
          this.$message.error(response.message)
        }
      });
    },
    // 成为VIP赞助人-打开-窗口
    openSponsor() {
      this.addSponsorData.message = ''
      this.addSponsorData.payNumber = ''
      this.isOpenSponsor = !this.isOpenSponsor
    },
    // 成为VIP赞助人-关闭-窗口
    handleCloseSponsor() {
      this.addSponsorData.message = ''
      this.addSponsorData.payNumber = ''
      this.isOpenSponsor = !this.isOpenSponsor
    }
  }
}
</script>
<style lang="less" scoped>

// 公共样式
.line-top {
  clear: both;
}

// 一级留言输入框
.el-textarea__inner {
  color: black;
}

// 原创背景颜色
.article-container .main .article-box div .el-tag--dark.el-tag--danger[data-v-a30a8e90] {
  border-color: #ab1b4a;
  background-color: #ab1b4a;
}

// 举报、编辑、删除按钮图标
.ico-btn {
  font-size: 25px;
  color: white;
}

.big-icon {
  font-weight: bold;
  font-size: 28px !important;
  color: #747474;
}

.icon-shoucang-shoucang {
  font-weight: bold;
  font-size: 31px !important;
}

.big-star {
  font-weight: bold;
  font-size: 33px !important;
}

.big-icon:hover, .big-star:hover {
  font-weight: bold;
  color: #d95107;
}

.icon-zan1 {
  font-size: 21px;
}

.icon-zengbi, .el-icon-star-off, .icon-zan1 {
  cursor: auto;
  color: #5e6165;
}


// 最外层容器
.article-container {
  background-color: #242424;

  // 页面左则容器、右则容器
  .main, .aside {
    background-color: #242424;
  }

  .main {

    h2 {
      margin-bottom: 20px;
    }

    // 文章详情区域
    .article-box {
      border-radius: 4px;
      background-color: #FFFFFF;

      div {
        // 原创、分类名标记
        .el-tag {
          color: white;
        }

        // 原创标记颜色和边框颜色
        .el-tag--dark.el-tag--danger {
          border-color: #DB7093;
          background-color: #DB7093;
        }

        // 文章标题下各项总数
        span {
          font-size: 14px;
          color: #5f6163;
        }
      }

      .article-content {
        line-height: 30px;

        .content {
          letter-spacing: 1.5px;

          a {
            color: #8205c6;
          }
        }

        .update-time {
          display: flex;
          justify-content: right;
          margin-top: 80px;
          margin-bottom: 20px;
        }

        .do-article {
          display: flex;
          justify-content: space-between;
          margin-top: 50px;

          .flex {
            .el-tooltip > span {
              font-size: 14px;
            }

            a {
              font-size: 25px;

              span {
                font-size: 18px;
              }
            }
          }

          div {
            span {
              font-size: 25px;
            }
          }
        }
      }

      .article-refuse span {
        font-weight: bold;
      }
    }

    // 公共样式-留言区最外层容器
    .comment-box {
      margin-top: 20px;
      border-radius: 4px;
      background-color: #e5e4e4;

      // 当前用户头像，一级留言发表框左则
      img {
        width: 50px;
        height: 50px;
        padding: 1px;
        border: #bbbec3 solid 1px;
        border-radius: 50%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        object-fit: cover;
      }

      img:hover {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
      }

      .add-one {
        border-radius: 4px;
        background-color: #d5d4d5;

        div {
          .el-form {
            display: flex;
            align-items: center;
          }
        }

      }

      .content {
        padding: 8px 0;
        font-size: 16px;
      }

      .com-two {
        li {
          margin-bottom: 10px;

          div {
            img {
              height: 30px;
              width: 30px;
            }
          }
        }
      }

      .time {
        font-size: 12px;

        span {
          margin-left: 30px;
        }
      }
    }
  }

  // 右则边栏公共样式
  .aside {
    margin-bottom: 20px;
    border-radius: 4px;

    // 修改则边栏标题横线颜色
    .el-divider {
      background-color: #828282;
    }

    // 作者、经历主人头像
    .sidle-avatar {
      width: 100%;
      border-radius: 4px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    }

    .master-name {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }

    .username {
      display: flex;
      justify-content: center;
    }

    .el-button {
      width: 100%;
      color: #cccccc;
      background-color: black;
    }

    .el-button:hover {
      color: white;
    }

    .tex-box {
      padding: 20px;
    }

    .el-carousel {
      padding: 0 20px 30px 20px;

      .carousel-img {
        height: 280px;
        width: 100%;
        text-align: center;
        border-radius: 4px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
      }
    }
  }
}

// 清除浮动分割线
.line-1 {
  height: 1px;
  width: 100%;
  clear: both;
}

.line-2 {
  height: 20px;
  width: 100%;
  clear: both;
}

// md
@media screen and (min-width: 960px) {

  .article-container .container-in .main .article-box .article-content[data-v-a30a8e90] {
    padding: 20px 50px;
  }

  // 最外层容器
  .article-container {

    .container-in {
      width: 80%;
      margin: 0 auto;
      padding-bottom: 26px;

      .main {
        width: 75%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        float: left;

        .article-box {
          padding: 50px 120px;

          .article-content {
            padding: 30px;
          }

          .article-refuse {
            margin-top: 20px;
            padding-left: 30px;
          }

          .flex {
            display: flex;
            justify-content: space-around;
            width: 50%;
          }
        }

        // 留言区最外层容器
        .comment-box {
          width: 90%;
          padding: 50px;

          h1 {
            margin: 0 0 20px 20px;
          }

          // 新增一级留言
          .add-one {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

            div {
              padding-top: 20px;
              padding-bottom: 20px;

              .el-form {
                padding: 30px 50px;

                img {
                  margin-right: 10px;
                }
              }
            }
          }

          // 一二级留言展示区
          .com-one {
            margin-top: 20px;
            padding: 50px 0;
            border-radius: 4px;

            > li {
              border-radius: 4px;
              padding: 0 50px 0;

              > div {
                display: flex;
              }

              img {
                margin-right: 20px;
              }
            }

            // 二级留言
            .com-two {
              margin-top: 10px;
              margin-left: 70px;
            }

          }

        }

      }

      .aside {
        width: 23%;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        float: left;
        margin-left: 26px;
      }
    }
  }
}

// sm
@media screen and (max-width: 960px) {

  // 最外层容器
  .article-container {

    .container-in {
      width: 100%;
      clear: both;
      padding-bottom: 20px;

      .main {
        width: 100%;
        margin: 0 auto;

        .article-box {
          padding: 20px;

          .article-content {
            padding: 30px 0 50px;

          }

          .article-refuse {
            margin-top: 10px;
          }

          .flex {
            display: flex;
            justify-content: space-around;
            width: 80%;
          }
        }

        // 留言区最外层容器
        .comment-box {

          h1 {
            padding-top: 30px;
            padding-left: 10px;
          }

          .add-one {
            width: 100%;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

            div {
              padding: 20px 10px;
            }

          }

          // 一二级留言展示区
          .com-one {
            margin-top: 20px;
            padding: 20px 0;
            border-radius: 4px;

            > li {
              border-radius: 4px;
              padding: 0 10px 0;


              > div {
                display: flex;
              }

              img {
                margin-right: 8px;
              }
            }

            // 二级留言
            .com-two {
              margin-top: 10px;
              margin-left: 60px;
            }
          }
        }
      }

      .aside {
        width: 100%;
        margin: 20px auto 0;
      }
    }
  }

}
</style>
